﻿@{ 
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <script src="~/Scripts/jquery-2.0.3.min.js"type="text/javascript"></script>
    <link rel="stylesheet" type="text/css"  href="~/Content/css/index.css"/>

</head>
<body>
    <header>
        <a href="#" class="logo"></a>
        <div class="desc">欢迎登录超市管理系统</div>
    </header>
    <section>
        <form action="">
            <div class="register-box">
                <label for="username" class="username_label">
                    用 户 名
                    <input maxlength="20" type="text" placeholder="您的用户名和登录名" />
                </label>
                <div class="tips">

                </div>
            </div>
            <div class="register-box">
                <label for="username" class="other_label">
                    密 码
                    <input maxlength="20" type="password" placeholder="您的密码" />
                </label>
                <div class="tips">

                </div>
            </div>


            <div class="register-box">
                <label for="username" class="other_label">
                    验 证 码
                    <input id="qq" maxlength="20" type="text" placeholder="请输入验证码" />
                </label>
                <span id="code"></span>
                <div class="tips">

                </div>
            </div>

            <div class="submit_btn">
                <button type="button" id="submit_btn" >立 即 登 录</button>
            </div>
            <div class="tips">

            </div>
        </form>
    </section>
</body>
</html>
<script>

    // 	验证码
    //	 验证码刷新
    function code() {
        var str = "qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";
        var str1 = "";
        for (var i = 0; i < 4; i++) {
            str1 += str.charAt(Math.floor(Math.random() * 62))
        }

        //str1 = str1.substring(1)
        $("#code").text(str1);

    }
    code();
    $("#code").click(code);
    //	验证码验证
    $('#qq').blur(function () {
        if ($(this).val().length == 0) {
            $(this).parent().next().next("div").text("");
            $(this).parent().next().next("div").css("color", '#ccc');
        } else if ($(this).val().toUpperCase() != $("#code").text().toUpperCase()) {
            $(this).parent().next().next("div").text("验证码不正确");
            $(this).parent().next().next("div").css("color", 'red');
        } else {
            $(".tips").eq(3).html("");
            $(this).parent().next().next("div").text("");
            $("#submit_btn").click(function () {
                var p = $("input");

                $.ajax({
                    type: 'post',
                    url: '/Login/Valid',
                    async: true,
                    dataType: 'json',
                    data: { 'name': p[0].value, 'password': p[1].value },
                    success: function (data) {
                        if (data == 0)
                            window.location.href = "/PersonalMsg/PersonalOrders";
                        else
                            alert("用户名或密码错误！");
                    },
                    error: function () {
                        alert("网络错误!");
                    }
                });
            })
        }
    })
    $("#submit_btn").click(function () {
        if ($("#qq").val().length == 0 || $("#qq").val().toUpperCase() != $("#code").text().toUpperCase()) {
            $(".tips").eq(3).html("请先输入正确的验证码！");
            $(".tips").eq(3).css("color",'red');
            return;
        }
    })
    
</script>
